<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>警告框</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .box{
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>

<div class="alert alert-primary" role="alert">Hello Bootstrap</div>
<div class="alert alert-secondary" role="alert">Hello Bootstrap</div>
<div class="alert alert-success" role="alert">Hello Bootstrap</div>
<div class="alert alert-danger" role="alert">Hello Bootstrap</div>
<div class="alert alert-warning" role="alert">Hello Bootstrap</div>
<div class="alert alert-info" role="alert">Hello Bootstrap</div>
<div class="alert alert-dark" role="alert">Hello Bootstrap</div>
<div class="alert alert-light" role="alert">Hello Bootstrap</div>
<hr/>

<div class="alert alert-primary" role="alert">Hello Bootstrap</div>
<div class="alert alert-secondary" role="alert">Hello Bootstrap</div>
<div class="alert alert-success" role="alert">Hello <a href="#" class="alert-link">Bootstrap</a></div>
<div class="alert alert-danger" role="alert">Hello Bootstrap</div>
<div class="alert alert-warning" role="alert">Hello Bootstrap</div>
<div class="alert alert-info" role="alert">Hello Bootstrap</div>
<div class="alert alert-dark" role="alert">Hello Bootstrap</div>
<div class="alert alert-light" role="alert">Hello Bootstrap</div>
<hr/>

<div class="alert alert-success" role="alert">
    <h4 class="alert-heading">Well done!</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr/>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>

</div>
<hr>

<div id="my-alert" class=" alert alert-warning alert-dismissible fade show" role="alert">
    <h4>Hello Bootstrap</h4>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<button type="button" class="btn-primary rounded" onclick="my_alert()">弹出</button>

<script>
    function my_alert(){
        console.log($("#my-alert"));
        $("#my-alert").alert();
    }
</script>

<script src="node_modules/jquery/dist/jquery.slim.js"></script>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>